import React from 'react';
// import ReactSwiper from 'reactjs-swiper';
import { exhibitionInfo } from "../http/interface";
import style from '../style/exhibition.module.scss'
import Swiper from 'swiper'
import more from '../image/more.png'


class Exhibition extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            exhibition_id: '',
            content: '',
            exhibit_list: [],
            exhibition_imgs: [],
            exhibition_name: '',
            open: false,
            playId: null
        }

    }
    componentDidMount() {
        let vm = this
        let exhibition_id = this.props.match.params.id
        this.setState({
            exhibition_id: exhibition_id
        },() => {
            this.getInfo()
        })
        let mySwiper = new Swiper('.swiper-container', {
            slidesPerView : 3,
            spaceBetween : 20,
        })
    }
    routerGo(path) {
        this.props.history.push(path)
    }
    open() {
        this.setState({
            open: true
        })
    }
    async getInfo() {
        try {
            const res = await exhibitionInfo({
                exhibition_id: this.state.exhibition_id
            });
            if (res.status === 1) {
                let {
                    content,
                    exhibit_list,
                    exhibition_imgs,
                    exhibition_name
                } = res.data
                this.setState({
                    content,
                    exhibit_list,
                    exhibition_imgs,
                    exhibition_name
                });
            }
        } catch (error) {
            console.log(error);
        }
    }
    toggleplay(val) {
    }
    render() {
        return (
            <div className={style.exhibition}>
                <div className={style.banner}>
                    <div className={`swiper-container ${style.swiperContainer}`}>
                        <div className={`swiper-wrapper ${style.swiperWrapper}`}>
                            {
                                this.state.exhibition_imgs.map((item,index)=>{
                                    return(                                    
                                        <div key={index} ref="myli" className={`swiper-slide ${style.slide}`}>
                                            <img className={style.image} src={item}></img>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                <div className={style.content}>
                    <div className={style.introduce}>
                        <div className={style.title}>
                            展区介绍
                        </div>
                        <div className={style.info}>
                            <p className={style.name}>
                                {this.state.exhibition_name}
                            </p>
                            <p className={`${style.article} ${this.state.open?style.open:''}`} dangerouslySetInnerHTML={{__html: this.state.content}}>
                            </p>
                            {
                                this.state.open?
                                null: <div className={style.bg} onClick={() => {this.open()}}>
                                    <img src={more} alt=""/>
                                </div>
                            }
                        </div>
                    </div>
                    <div className={style.exhlist}>
                        <div className={style.title}>
                            展区展项
                        </div>
                        {
                            this.state.exhibit_list.map((item,index) => {
                                return <div className={style.exh} key={index}>
                                    <div className={style.image}  onClick={() => {this.toggleplay(item)}}>
                                        <img className={style.eximg} src={item.exhibit_list_img} alt=""/>
                                        <div className={`${style.playbtn} ${this.state.playId == item.exhibit_id?style.pause:style.play}`}>
                                        </div>
                                    </div>
                                    <div className={style.right}  onClick={() => {this.routerGo(`/exhibit/detail/${item.exhibit_id}`)}}>
                                        <p className={style.name}>
                                            {item.exhibit_name}
                                        </p>
                                        <p className={style.detail}>
                                            {item.desc}
                                        </p>
                                        <p className={style.num}>{item.listen_num}人收听</p>
                                    </div>
                                </div>
                            })
                        }

                        <div className={style.nomore}>没有更多了</div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Exhibition;
